import Search from './search'
import Table from './table'
import Pagination from './pagination'
import Dialog from './dialog'
import { computed, defineComponent } from 'vue'
export default defineComponent({
  name: 'SDesign',
  props: {
    pagination: {
      type: [Object, null],
      required: true,
    },
    dialogConfig: {
      type: [Object, null],
      required: false,
    },
  },
  setup(props, { attrs, slots, emit, expose }) {
    // 搜索栏
    const searchList = attrs.searchList
    const onChangeSearch = attrs.onChangeSearch

    // 表格
    const handleSelectionChange = attrs.handleSelectionChange
    const data = computed(() => attrs.data)
    const columns = attrs.columns
    // 分页
    const pagination = props.pagination
    const handleCurrentChange = attrs.handleCurrentChange
    const handleSizeChange = attrs.handleSizeChange
    // 对话框
    const dialogConfig = props.dialogConfig
    const formConfig = attrs.formConfig
    const formItemConfig = attrs.formItemConfig
    const handleSubmit = attrs.handleSubmit

    return () => (
      <>
        <Search
          searchList={searchList}
          onSearchRefreshTable={onChangeSearch}
          v-slots={{
            extra: slots?.['handleExtra'] ?? null,
          }}
        ></Search>

        <Table
          onSelectionChange={handleSelectionChange}
          data={data.value}
          columns={columns}
        ></Table>

        {pagination ? (
          <Pagination
            {...pagination}
            onCurrentChange={handleCurrentChange}
            onSizeChange={handleSizeChange}
          ></Pagination>
        ) : null}

        {dialogConfig ? (
          <Dialog
            v-slots={{
              extra: slots?.['dialogExtra'] ?? null,
            }}
            dialogConfig={dialogConfig}
            formConfig={formConfig}
            formItemConfig={formItemConfig}
            onHandleSubmit={handleSubmit}
          />
        ) : null}
      </>
    )
  },
  install: function (Vue) {
    Vue.component(this.name, this)
  },
})
